<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>表单元素</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .layui-form {
            width: 600px;
            margin: 50px 0;
        }

        .list li {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="layui-container">

        <!-- 表单元素  通过 .layui-form 标识表单内容
        
        -->

        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <!-- 表单验证，设置 lay-verify="规则" -->
                    <input type="text" class="layui-input" value="zhangfei" name="username" autocomplete="off"
                        lay-verify="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" value="123456" name="password" autocomplete="off">
                </div>
            </div>
            <button class="layui-btn" lay-submit lay-filter="login">提交</button>
        </div>

        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="name" autocomplete="off" lay-verify="required|username">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="age" autocomplete="off" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" title="男" name="sex" value="0" checked>
                    <input type="radio" title="女" name="sex" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <!-- 多个验证规则使用 | 隔开，按顺序校验 -->
                    <input type="text" class="layui-input" name="tel" autocomplete="off"
                        lay-verify="required|phone|selfPhone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="address" autocomplete="off" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学校</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="school" autocomplete="off" lay-verify="required">
                </div>
            </div>

            <button class="layui-btn" lay-submit lay-filter="change">提交</button>
        </div>

        <button class="layui-btn info">获取用户信息</button>
        <ul class="list"></ul>

        <div class="layui-form">
            <!-- 香蕉 -->
            <input type="checkbox" name="" id="" title="香蕉" lay-filter="fruit" value="banana">
            <input type="checkbox" name="" id="" lay-skin="primary" title="苹果">
            <input type="checkbox" name="" id="" lay-skin="switch" lay-text="on|off">

        </div>
    </div>

    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/javascript">
        // 获取到form模块
        var form = layui.form,
            $ = layui.$,
            userId = null;

        // 表单监听事件
        form.on("submit(login)", function (data) {
            console.log(data);
            $.ajax({
                url: "http://bufantec.com/api/test/user/doLogin",
                type: "POST",
                data: data.field,
                success(res) {
                    console.log(res);
                    if (res.code == "success") {
                        layer.msg("登录成功");
                        userId = res.userId;
                    } else {
                        layer.msg("登录失败");
                    }
                }
            })
            /* $.ajax({
                url: "http://bufantec.com/api/test/user/checkUserName",
                type: "POST",
                data: {
                    username: data.field.username
                },
                success(res){
                    console.log(res);
                    if(res.code == "fail"){
                        layer.msg("用户名已存在，请重新输入", {icon: 1500});
                    }else {
                        $.ajax({
                            url: "http://bufantec.com/api/test/user/save",
                            type: "POST",
                            data: data.field,
                            success(res){
                                console.log(res);
                                if(res.code == "success"){
                                    layer.msg("添加成功", {icon: 1500});
                                }else {
                                    layer.msg("添加失败", {icon: 1500});
                                }
                            }
                        })
                    }
                }
            }) */
        })

        // 监听提交
        form.on("submit(change)", function (data) {
            // data.field 表单元素内容 name:value 组成的对象
            data.field.userId = userId;
            $.ajax({
                url: "http://bufantec.com/api/test/user/updateUserInfo",
                type: "POST",
                data: data.field,
                success(res) {
                    if (res.code == "success") {
                        layer.msg("更新成功");
                    } else {
                        layer.msg("更新失败");
                    }
                }
            })
        })

        // 监听复选框
        form.on("checkbox(fruit)", function (data){
            console.log(data);
            console.log(data.elem.checked);
        })

        $(".info").click(function () {
            $.ajax({
                url: "http://www.bufantec.com/api/test/user/detail",
                data: {
                    id: userId
                },
                success(res) {
                    console.log(res);
                    var str = `
                    <li>昵称：${ res.data.name }</li>
                    <li>性别：${ res.data.sex == 0 ? "男" : "女" }</li>
                    <li>年龄：${ res.data.age }</li>
                    <li>电话：${ res.data.tel }</li>
                    <li>地址：${ res.data.address }</li>
                    <li>学校：${ res.data.school }</li>
                    `;
                    $(".list").html(str);
                }
            })
        })

        // 用户自定义个校验 form.verify()
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }

                    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                    if (value === 'xxx') {
                        alert('用户名不能为敏感词');
                        return true;
                    }
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ,
            pass: [
                /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
            ],
            selfPhone: [
                /^13567674589$/, "电话号码不正确"
            ]
        })
    </script>
</body>

</html>